<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
		<title>编辑收货地址</title>
		<link rel="stylesheet" href="../../css/ui.min.css" />
		<link rel="stylesheet" href="../../css/jquery-ui.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<link rel="stylesheet" href="../../css/shop.css" />
	</head>
	<body ontouchstart>
		<header class="ui-header">
			<a href="javascript:history.go(-1)" class="mui-action-back ui-icon hd-left">
				<span class="iconfont icon-fanhui"></span>
			</a>
			<div class="ui-title">编辑收货地址</div>
			<a href="javascript:;" onclick="submit();" class="icon-text btn-save hd-right">保存</a>
		</header>
		<div class="ui-content" id="app">
			<div class="adds-cells">
				<div class="ui-cell ui-input-cell">
					<div class="ui-cell__bd">
						<input type="text" v-model="addrinfo.consignee" placeholder="收货人" class="ui-input">
					</div>
					<div class="ui-rt-icon">
						<span class="iconfont icon-address-book"></span>
					</div>
				</div>
				<div class="ui-cell ui-input-cell">
					<div class="ui-cell__bd">
						<input type="tel" v-model="addrinfo.mobile" placeholder="手机号码" class="ui-input">
					</div>
					<div class="ui-rt-select">
						<select name="" id="">
							<option value="">+86</option>
						</select>
					</div>
				</div>
				<div class="ui-cell ui-input-cell">
					<div class="ui-cell__bd">
						<input type="text" placeholder="" value="北京 北京市 东城区" readonly="readonly" class="ui-input" id="City">
					</div>
					<div class="ui-rt-select"></div>
				</div>
				<div class="ui-cell ui-input-cell">
					<div class="ui-cell__bd">
						<textarea v-model="addrinfo.address" placeholder="详细地址：如街道,门牌号，小区，楼栋号，单元等"></textarea>
					</div>
				</div>
				<div class="ui-cell ui-input-cell">
					<div class="ui-cell__bd">
						<p>默认地址</p>
					</div>
					<div class="ui-cell__ft">
						<input class="ui-switch" type="checkbox" checked="" />
					</div>
				</div>
			</div>
			<div class="adds-cells" @click="delAddr()">
				<div class="ui-cell ui-input-cell">
					<a href="" class="btn-del">删除收货地址</a>
				</div>
			</div>
		</div>
		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.js"></script>
		<script src="../../js/city-picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/common/config.js"></script>

		<script type="text/javascript">
			// mui插件初始化
			mui.init();
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				vm.init(self.addr);
			});

			var vm = new Vue({
				el: "#app",
				data: {
					addrinfo: {
						consignee: '',
					}
				},
				methods: {
					init(addrinfo) {
						this.addrinfo = addrinfo;
					},
					updateAddr() {
						var data = {
							request_type: 1,
							user_id: localStorage.getItem('user_id'),
							ress_type: 'update',
							address_id: this.addrinfo.address_id,
							country: 1,
							province: 1,
							city: 1,
							district: 1,
							address: this.addrinfo.address,
							mobile: this.addrinfo.mobile,
							consignee: this.addrinfo.consignee
						};
						this.editAddr(data,'update');
					},
					delAddr() {
						var data = {
							request_type: 1,
							user_id: localStorage.getItem('user_id'),
							ress_type: 'del',
							address_id: this.addrinfo.address_id
						};
						this.editAddr(data,'del');
					},
					editAddr(data,type){
						type = type=="update"?"修改":"删除";
						mui.ajax(Config.api.Add_up_de_ress, {
							data: data,
							type: 'post',
							dataType: 'json',
							success: function(data) {
								if (data.success == 1) {
									mui.toast(type + "成功");
									setTimeout(function() {
										var opener = plus.webview.currentWebview().opener();
										opener.reload();
										mui.back();
									}, 500);
								} else {
									mui.toast(type + "失败");
								}
							},
							error: function(xhr, type, errorThrown) {
								console.log("接口错误");
							},
						});
					}
				}
			});
			vm.init();

			function submit() {
				vm.updateAddr();
			}

			$("#City").cityPicker({
				title: "选择地址",
				onClose: function(p, v, dv) {
					$.closeModal()
				},
			});
			$("#City").click(function() {
				$.openModal()
			})
		</script>

	</body>
</html>
